<template>
  <div class="vuex-demo">
    <h4>Vuex 状态管理示例</h4>
    <div class="component-content">
      <div class="state-display">
        <p>当前计数: {{ count }}</p>
        <p>双倍值: {{ doubleCount }}</p>
      </div>
      
      <div class="actions">
        <el-button @click="increment">增加</el-button>
        <el-button @click="decrement">减少</el-button>
        <el-button @click="incrementAsync">异步增加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'VuexDemo',
  
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

<style scoped>
.vuex-demo {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

.state-display {
  margin-bottom: 15px;
}

.actions {
  display: flex;
  gap: 10px;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
}
</style> 